<template>
    <div class="userLists">
      <header>{{title}}</header>
      <!-- 发起会签 -->
      <div class="ul_content" v-if="joinType == 1">
        <el-checkbox-group v-model="checkList" v-if="!isResult">
          <div class="users" v-for="(item,index) in userList" v-if="item.login != publicUserName">
            <div class="users_left">
              <el-checkbox :label="item">{{item.firstName}}</el-checkbox>
            </div>
            <div class="users_right">{{item.deparment}}  {{item.job}}</div>
          </div>
        </el-checkbox-group>
        <div v-else>
          <div class="users" v-for="(item,index) in userList" v-if="item.login != publicUserName">
            <div class="users_left2">
              <div class="ul_top">{{item.signerName}}</div>
              <div class="ul_bottom" v-if="item.rejectMessage == '' || item.rejectMessage == null">会签意见:无</div>
              <div class="ul_bottom" v-else>会签意见:{{item.rejectMessage}}</div>
            </div>
            <div class="users_right2">
              <span class="ur_none" v-if="item.status ==0">未审核</span>
              <span class="ur_true" v-if="item.status ==1">同意</span>
              <span class="ur_false" v-if="item.status ==-1">驳回</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 发起报审 -->
      <div class="ul_content" v-if="joinType == 2">
        <el-radio-group v-model="checkPeo">
          <div class="users" v-for="(item,index) in userList" v-if="item.login != publicUserName">
            <div class="users_left">
              <el-radio :label="item">{{item.firstName}}</el-radio>
            </div>
            <div class="users_right">{{item.deparment}}  {{item.job}}</div>
          </div>
        </el-radio-group>
      </div>
      <!-- 同意/不同意 -->
      <div class="ul_content" v-if="joinType == 3 || joinType == 4">
        <div class="uc_title">会签意见</div>
        <div class="uc_inp">
          <el-input v-model="rejectMessage" placeholder="请输入会签意见" clearable></el-input>
        </div>
      </div>
      <footer>
        <div class="buttons but1" @click="close" v-html="!isResult?'取消':'关闭'"></div>
        <div class="buttons but2" @click="summitSign" v-if="!isResult">确认</div>
      </footer>
    </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    props:['joinType','joinId','joinPar','joinEdReportId','joinResult'],
    name: "jointlySing",
    data() {
      return {
        title: '',
        userList:[], //用户列表/父级传来的会签结果
        publicUserName: localStorage.getItem('userName'),
        checkList: [], //多选框列表
        checkPeo: [],
        isResult: false, //方便视图层判断是否为会签结果
        rejectMessage: '', //会签意见
      }
    },
    computed:{
      ...mapGetters([
        'showJointly'
      ])
    },
    created() {
      let self = this
      //会签结果
      if (self.joinResult != undefined && self.joinResult != null && self.joinResult.length > 0){
        self.title = '会签结果'
        self.isResult = true
        self.userList = self.joinResult
      } else { //普通会签发起
        if (self.joinType == 1){
          self.title = '发起会签'
        } else if (self.joinType == 2) {
          self.title = '发起报审'
        } else if (self.joinType == 3) {
          self.title = '同意'
        } else if (self.joinType == 4) {
          self.title = '不同意'
        }
        if (self.joinType == 1 || self.joinType == 2){
          self.$http.get(self.conURL + 'api/users').then(res => {
            self.userList = res.data
          })
        }
      }
    },
    mounted() {
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //关闭
      close(){
        let self = this
        self.upstate({key:'showJointly',val:false})
      },
      //提交
      summitSign(){
        let self = this
        if (self.joinType == 1){
          if (this.checkList.length<1){
            alert("请至少选择一人会签~");
            return false;
          }
        } else if (self.joinType == 2){
          if (this.checkPeo == ''){
            alert("请选择一人会签~");
            return false;
          }
        }
        if (self.joinType == 1 || self.joinType == 2) { //会签/报审确认
          let signatureList=[];
          if (self.joinType == 1){
            for (let i=0;i<this.checkList.length;i++){
              let check={}
              check["signer"]=this.checkList[i].login;
              check["status"]=0;
              check["creator"]= self.publicUserName;
              check["signerName"]=this.checkList[i].firstName;
              check["signerUrl"]=this.checkList[i].imageUrl;
              signatureList.push(check);
            }
          } else if (self.joinType == 2){
            let check={}
            check["signer"]=this.checkPeo.login;
            check["status"]=0;
            check["creator"]= self.publicUserName;
            check["signerName"]=this.checkPeo.firstName;
            check["signerUrl"]=this.checkPeo.imageUrl;
            signatureList.push(check);
          }
          self.joinPar["signatureList"]=signatureList;
          if (self.joinId != undefined && self.joinId != null && self.joinId != '' && self.joinId != 0){
            self.joinPar["id"] = self.joinId;
            self.joinPar["edReportId"] = self.joinEdReportId;
            self.joinPar["status"] = "open";
            self.$http.post(self.conURL + 'mongo/api/eddocs/update',self.joinPar).then(res => {
              this.$router.push('/index/important')
              self.upstate({key:'showJointly',val:false})
            })
          } else {
            self.joinPar["edReportId"] = self.joinEdReportId;
            self.joinPar["status"] = "open";
            self.$http.post(self.conURL + 'mongo/api/eddocs',self.joinPar).then(res => {
              this.$router.push('/index/important')
              self.upstate({key:'showJointly',val:false})
            })
          }
        } else { //同意/不同意
          if (self.joinType == 3) { //同意
            let params = {
              docId: self.joinId,
              signature: {
                rejectMessage: self.rejectMessage,
                signer: localStorage.getItem("userName"),
                status: 1
              }
            }
            self.$http.post(self.conURL + 'mongo/api/eddocs/sign',params).then(result => {
              this.$notify({
                title: '成功',
                message: '已同意审批',
                type: 'success'
              });
              self.$parent.detail.signatureList = []
              self.upstate({key:'showJointly',val: false})
            })
          } else if (self.joinType == 4) { //不同意
            let params = {
              docId: self.joinId,
              signature: {
                rejectMessage: self.rejectMessage,
                signer: localStorage.getItem("userName"),
                status: -1
              }
            }
            self.$http.post(self.conURL + 'mongo/api/eddocs/sign',params).then(res => {
              this.$notify({
                title: '成功',
                message: '已驳回审批',
                type: 'success'
              });
              self.$parent.detail.signatureList = []
              self.upstate({key:'showJointly',val: false})
            })
          }
        }
      },
    }
  }
</script>

<style lang="less">
  .userLists{
    width: 660px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #e5e5e5;
    box-shadow: #eeeeee 0px 0px 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    header{
      width: 100%;
      height: 74px;
      line-height: 74px;
      border-bottom: 1px solid #e5e5e5;
      padding: 0 30px;
      box-sizing: border-box;
      font-size: 20px;
      color: #222222;
    }
    footer{
      width: 100%;
      height: 59px;
      background: #fafafa;
      border-top: 1px solid #e5e5e5;
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .buttons{
        width: 93px;
        height: 37px;
        line-height: 39px;
        text-align: center;
        font-size: 16px;
        margin: auto 0;
        cursor: pointer;
      }
      .but1{
        background: #fff;
        color: #666666;
        border: 1px solid #dddddd;
        margin-right: 10px;
      }
      .but2{
        background: #0f76c8;
        color: #fff;
        border: 1px solid #0f76c8;
      }
    }
    .ul_content{
      display: flex;
      flex-direction: column;
      padding: 0 30px;
      box-sizing: border-box;
      position: relative;
      .users{
        width: 100%;
        min-height: 70px;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .users_left{
          display: flex;
          flex-direction: row;
          line-height: 70px;
          .el-checkbox__inner{
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          .el-radio{
            line-height: 70px;
          }
          .el-checkbox__inner:after{
            left: 7px;
            top: 4px;
          }
          .el-checkbox__label{
            font-size: 18px;
            color: #222222;
            margin-left: 20px;
          }
        }
        .users_left2{
          display: flex;
          flex-direction: column;
          width: 90%;
          .ul_top{
            margin-top: 20px;
            font-size: 18px;
            color: #222222;
            margin-bottom: 10px;
          }
          .ul_bottom{
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
          }
        }
        .users_right{
          font-size: 16px;
          color: #999999;
          line-height: 70px;
        }
        .users_right2{
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          font-size: 16px;
          line-height: 16px;
          padding-top: 20px;
          box-sizing: border-box;
          .ur_none{
            color: #999999;
          }
          .ur_true{
            color: #2fc072;
          }
          .ur_false{
            padding: 2px 6px;
            text-align: center;
            line-height: 24px;
            color: #fff;
            background: #dc4444;
            border-radius: 3px;
          }
        }
      }
      .uc_title{
        margin: 20px 0;
        font-size: 18px;
      }
      .uc_inp{
        width: 100%;
        height: 40px;
        .el-input__inner{
          height: 40px;
          background: #fff;
        }
      }
    }
  }
</style>
